<template>
	<view class="shopcart">
		<template v-if="list.length>0">
			<!--自定义导航-->
			<uniNavBar 
			title="购物车" 
			statusBar="true"
			fixed="true"
			:rightText='isNavBar?"完成":"编辑"' 
			@clickRight="isNavBar = !isNavBar"></uniNavBar>
			<!--商品内容-->
			<view class="shop-list">
				<view class="shop-item" v-for="(item,index) in list" :key="index">
					<label class="radio">
						<radio value="" color="#FF3333" :checked="item.checked" @tap="checkedFn(item.id)"></radio>
						<text></text>
					</label>
					<image class="shop-img" :src="item.imgUrl"></image>
					<view class="shop-text">
						<view class="shop-name">{{item.name}}</view>
						<view class="shop-color f-color">{{item.color}}</view>
						<view class="shop-price">
							<view>￥{{item.price}}</view>
							<UniNumberBox :disabled="isNavBar" :min="UniNumberBox.min" :value="item.num" @change="changeValue" @input="changeValueUpdate(item.id)"></UniNumberBox>
						</view>
					</view>
				</view>
			</view>
			<!--底部-->
			<view class="shop-foot">
				<label class="radio foot-radio" @tap="checkedAllFn">
					<radio value="" color="#FF3333" :checked="checkedAllValue"></radio><text>全选</text>
				</label>
				<template v-if="!isNavBar">
					<view class="foot-total">
						<view class="foot-price">合计：<text class="f-actiye-color">￥{{foot_price}}</text></view>
						<view class="foot-count">结算({{foot_count}})</view>
					</view>
				</template>
				<template v-if="isNavBar">
					<view class="foot-total">
						<view class="foot-price" style="color: #FFFFFF;background-color: #000000;">移入收藏夹</view>
						<view class="foot-count">移除</view>
					</view>
				</template>
			</view>
		</template>
		<template v-else>
			<!--自定义导航-->
			<uniNavBar title="购物车" statusBar="true" fixed="true"></uniNavBar>
			<view class="shop-else-list">
				<view class="shop-else-list">
					<text>购物车还是空的~</text>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue';
	import UniNumberBox from '@/components/uni/uni-number-box/components/uni-number-box/uni-number-box.vue';
	export default {
		data() {
			return {
				isNavBar: false,
				UniNumberBox: {
					min: 1
				},
				list: [
					{
						checked: false,
						id: 1,
						name: "是大家都拿数据库的纳税空间的内外交困",
						imgUrl: "../../static/img/Children2.jpg",
						color: "颜色：红",
						price: 10,
						num: 1
					},
					{
						checked: false,
						id: 2,
						name: "是大家都拿数据库的纳税空间的内外交困",
						imgUrl: "../../static/img/Children2.jpg",
						color: "dsadwewq",
						price: 20,
						num: 1
					},
					{
						checked: false,
						id: 3,
						name: "是大家都拿数据库的纳税空间的内外交困",
						imgUrl: "../../static/img/Children2.jpg",
						color: "dsadwewq",
						price: 30,
						num: 1
					},
					{
						checked: false,
						id: 4,
						name: "是大家都拿数据库的纳税空间的内外交困",
						imgUrl: "../../static/img/Children2.jpg",
						color: "dsadwewq",
						price: 40,
						num: 1
					},
					{
						checked: false,
						id: 5,
						name: "是大家都拿数据库的纳税空间的内外交困",
						imgUrl: "../../static/img/Children2.jpg",
						color: "dsadwewq",
						price: 50,
						num: 1
					},
					{
						checked: false,
						id: 6,
						name: "是大家都拿数据库的纳税空间的内外交困",
						imgUrl: "../../static/img/Children2.jpg",
						color: "dsadwewq",
						price: 100,
						num: 1
					},
					{
						checked: false,
						id: 7,
						name: "是大家都拿数据库的纳税空间的内外交困",
						imgUrl: "../../static/img/Children2.jpg",
						color: "dsadwewq",
						price: 150,
						num: 1
					},
					{
						checked: false,
						id: 8,
						name: "是大家都拿数据库的纳税空间的内外交困",
						imgUrl: "../../static/img/Children2.jpg",
						color: "dsadwewq",
						price: 200,
						num: 1
					}
				],
				checkedAllValue: false,
				foot_price: 0,
				foot_count: 0,
				UniNumberBoxValue: 0
			}
		},
		mounted() {
		},
		components: {
			uniNavBar,
			UniNumberBox
		},
		methods: {
			//商品数量发生改变时执行
			changeValue(value){
				this.UniNumberBoxValue = value;
			},
			//商品数量发生改变时执行
			changeValueUpdate(id){
				let list = this.list;
				for (var i = 0; i < list.length; i++) {
					if(list[i].id === id){
						if(list[i].checked){
							if(list[i].num < this.UniNumberBoxValue){
								this.foot_count++;
								this.foot_price = this.foot_price + list[i].price;
							}else{
								this.foot_count--;
								this.foot_price = this.foot_price - list[i].price;
							}
						}
						list[i].num = this.UniNumberBoxValue;
					}
				}
			},
			//单选
			checkedFn(id){
				let list = this.list;
				for (var i = 0; i < list.length; i++) {
					if(list[i].id === id){
						if(list[i].checked){
							list[i].checked = false;
							this.foot_price = this.foot_price - (list[i].price * list[i].num);
							this.foot_count--;
						}else{
							list[i].checked = true;
							this.foot_price = this.foot_price + (list[i].price * list[i].num);
							this.foot_count++;
						}
					}
				}
			},
			//全选
			checkedAllFn(){
				let list = this.list;
				for (var i = 0; i < list.length; i++) {
					if(list[i].checked){
						list[i].checked = false;
						this.foot_price = this.foot_price - (list[i].price * list[i].num);
						this.foot_count--;
					}else{
						list[i].checked = true;
						this.foot_price = this.foot_price + (list[i].price * list[i].num);
						this.foot_count++;
					}
				}
				if(this.checkedAllValue){
					this.checkedAllValue = false;
				}else{
					this.checkedAllValue = true;
				}
			}
		}
	}
</script>

<style scoped>
.shop-list{
	padding-bottom: 100rpx;
}
.shop-else-list{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #F7F7F7;
	display: flex;
	align-items: center;
	justify-content: center;
}
.shop-item{
	display: flex;
	padding: 20rpx;
	align-items: center;
	background-color: #F7F7F7;
	margin-bottom: 10rpx;
}
.shop-img{
	width: 200rpx;
	height: 200rpx;
}
.shop-text{
	flex: 1;
	padding: 20rpx;
}
.shop-color{
	padding: 10rpx 0;
	font-size: 24rpx;
}
.shop-price{
	display: flex;
	justify-content: space-between;
}
.shop-foot{
	border-top: 2rpx solid #F7F7F7;
	background-color: #F7F7F7;
	position: fixed;
	/* #ifdef APP */
	bottom: 0;
	/* #endif */
	/* #ifdef H5 */
	bottom: 50px;
	/* #endif */
	left: 0;
	width: 100%;
	height: 100rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.foot-radio{
	padding-left: 20rpx;
}
.foot-total{
	display: flex;
}
.foot-price{
	line-height: 100rpx;
	padding: 0 20rpx;
}
.foot-count{
	background-color: #49BDFB;
	color: #FFFFFF;
	padding: 0 60rpx;
	line-height: 100rpx;
}
</style>
